<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>门禁管理</el-breadcrumb-item>
                <el-breadcrumb-item>门列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="10">
            <el-col :span='4'>
                <el-button v-if='!form.isShow' size="small" type="primary" @click='toAdd'>新增门</el-button>
                <el-button v-else size="small" type="primary" @click='form.isShow=false'>返回列表</el-button>
            </el-col>
            <el-col :span='2' v-show='!form.isShow'>
                <el-select size="small" v-model="table.deptId" clearable placeholder="请选择部门" @change='deptChange'>
                    <el-option v-for='item in table.depts' :key='item.deptId' :label="item.name" :value="item.deptId"></el-option>
                </el-select>
            </el-col>
            <el-col :span='4' v-show="!form.isShow">
                <el-input size="small" placeholder="请输入名称或者设备号" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData"></el-input>
            </el-col>
        </el-row>

        <!--表格-->
        <el-row  class="bone-top-10" v-show='!form.isShow'>
            <el-table :data='table.tableData' border stripe style='width:100%' size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column width="80" label="编号" prop='doorId'></el-table-column>
                <el-table-column width="150" label="设备号" prop='devId'></el-table-column>
                <el-table-column width="100" label="名称" prop='name'></el-table-column>
                <el-table-column width="150" label="部门" prop='deptName'></el-table-column>
                <el-table-column width="100" label="所属门禁" prop='doorAccessName'></el-table-column>
                <el-table-column width="100" label="门禁内序号" prop='accessOrderNum'></el-table-column>
                <el-table-column width="100" label="经度" prop='lng'></el-table-column>
                <el-table-column width="100" label="纬度" prop='lat'></el-table-column>
                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
                <el-table-column fixed='right' min-width="350" label="操作">
                    <template slot-scope='scope'>
                        <span v-if='form.deptId==scope.row.deptId'>
                            <el-button type="text" @click='modify(scope.row)'>修改</el-button>
                            <el-button type="text" @click='toDel(scope.row.doorId)'>删除</el-button>
                            <el-button type="text" @click='toOpen(scope.row.doorId)'>开门</el-button>
                            <el-button type="text" @click='toClose(scope.row.doorId)'>关门</el-button>
                            <el-button type="text" @click='addOpenTime(scope.row)'>添加开放时间</el-button>
                        </span>
                        <span style='margin-left:10px;'>
                            <el-button type='text' @click='lookCard(scope.row.doorId)'>查看门卡</el-button>
                            <el-button type='text' @click='lookEvent(scope.row.doorId)'>查看事件</el-button>
                        </span>
                        
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" :current-page="this.table.currentPage" :page-size="this.table.pageSize" layout="total, prev, pager, next, jumper" :total="this.table.rowCount"></el-pagination>
        </el-row>

        <!--表单-->
        <el-row v-show='form.isShow' class='bone-top-10'>
            <el-col :span='6'>
                <el-card>
                    <div slot='header'>
                        <span>{{form.formTitle}}</span>
                    </div>
                    <el-form :model="form" :rules="form.rules" ref='form' size='small' label-width="100px" label-position="right">
                        
                        <el-form-item label="所属门禁" prop="doorAccessId">
                            <el-select v-model="form.doorAccessId" clearable placeholder="请选择门禁" style="width:100%">
                                <el-option v-for='item in form.doorAccesses' 
                                :key='item.doorAccessId' :label="item.name" 
                                :value='item.doorAccessId'></el-option>
                            </el-select>
                        </el-form-item>
                         <el-form-item label="门禁内序号" prop='accessOrderNum'>
                            <el-input v-model.number="form.accessOrderNum" placeholder="请输入门禁内序号"/>
                        </el-form-item>
                        <el-form-item label="设备名称" prop='name'>
                            <el-input v-model="form.name" placeholder="请输入设备名称"/>
                        </el-form-item>
                        <el-form-item label="设备号" prop='devId'>
                            <el-input v-model="form.devId" placeholder="请输入设备名称"/>
                        </el-form-item>
                        <el-form-item label="经度" prop="lng">
                            <el-input-number v-model="form.lng" placeholder="请输入经度" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item label="纬度" prop="lat">
                            <el-input-number v-model="form.lat" placeholder="请输入纬度" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button  @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                            <el-button  @click="form.isShow=false" type="primary">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!--门卡弹窗-->
        <el-dialog title="门卡列表" 
        :visible.sync='cardDialog.dialog'
        width='1000px'>
            <el-table :data='cardDialog.tableData'
            border stripe style='width:100%' size="small" 
            :highlight-current-row="true" ref="doorDialogTable">
                <el-table-column width="80" label="编号" prop='cardId'></el-table-column>
                <el-table-column min-width="100" label="设备号" prop='devId'></el-table-column>
                <el-table-column width="100" label="部门" prop='deptName'></el-table-column>
                <el-table-column width="100" label="人员" prop='empName'></el-table-column>
                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
                <el-table-column width="150" label="绑定时间" prop='bindTime'></el-table-column>
                <el-table-column width="150" label="开放时间名称" prop='timeName'></el-table-column>
                <el-table-column width="100" label="结束日期" prop='endDate'></el-table-column>
                <el-table-column width="150" label="时间段">
                    <template slot-scope='scope'>
                        <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="星期" prop='weekday'></el-table-column>
                <el-table-column width="100" label="识别方式" prop='opModeStr'></el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination'
                @current-change="handleCardDialogChange"
                :current-page="this.cardDialog.currentPage" 
                :page-size="this.cardDialog.pageSize" 
                :total="this.cardDialog.rowCount"
                layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-dialog>

        <!--事件弹窗-->
        <el-dialog title='事件列表'
        :visible.sync='eventDialog.dialog'
        width='950px'>
            <el-table :data='eventDialog.tableData'
            border stripe style='width:100%' size="small" 
            :highlight-current-row="true" ref="eventDialogTable">
                <el-table-column width="80" label="编号" prop='id'></el-table-column>
                <el-table-column min-width="150" label="部门" prop='deptName'></el-table-column>
                <el-table-column min-width="150" label="门卡" prop='cardDevId'></el-table-column>
                <el-table-column width="100" label="人员" prop='empName'></el-table-column>
                <el-table-column width="80" label="事件">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.doorEvent==1'>进门</span>
                        <span v-if='scope.row.doorEvent==2'>出门</span>
                        <span v-if='scope.row.doorEvent==3'>无效卡</span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="事件类型">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.eventType==1'>开门</span>
                        <span v-if='scope.row.eventType==2'>关门</span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="事件触发">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.trigger==1'>门卡</span>
                        <span v-if='scope.row.trigger==2'>地图</span>
                        <span v-if='scope.row.trigger==3'>其他</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="时间" prop='createTime'></el-table-column>
            
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination'
                @current-change="handleEventDialogChange"
                :current-page="this.eventDialog.currentPage" 
                :page-size="this.eventDialog.pageSize" 
                :total="this.eventDialog.rowCount"
                layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-dialog>

        <!--添加开放时间弹窗-->
        <el-dialog title='添加开放时间'
        :visible.sync='openTimeDialog.dialog'
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        width='410px'>
            <el-form :model='openTimeDialog.form' :rules='openTimeDialog.form.rules' ref='openTimeForm'
            size='small' label-width="80px" label-position="right">
                <el-form-item label="名称" prop='name'>
                   <el-input v-model="openTimeDialog.form.name" placeholder="请输入开放时间名称"/>
                </el-form-item>
                <el-form-item label="过期时间" prop='endDate'>
                    <el-date-picker style='width:100%;' class="expireTime"
                        v-model='openTimeDialog.form.endDate'
                        :clearable = 'false'
                        :editable = 'false'
                        value-format='yyyy-MM-dd'
                        type="date"
                        size='small'
                        placeholder="过期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="时间段">
                    <el-time-picker
                        style='width:100%;'
                        is-range
                        v-model="openTimeDialog.form.timePicker"
                        :clearable = 'false'
                        :editable = 'false'
                        value-format='HH:mm:ss'
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="星期">
                    <el-checkbox-group v-model="openTimeDialog.form.weekday" :min='1'>
                        <el-checkbox border size='small' class='item-float' :label="1" key='1'>星期一</el-checkbox>
                        <el-checkbox border size='small' class='item-float' :label="2" key='2'>星期二</el-checkbox>
                        <el-checkbox border size='small' class='item-float' :label="3" key='3'>星期三</el-checkbox>
                        <el-checkbox border size='small' class='item-float' :label="4" key='4'>星期四</el-checkbox>
                        <el-checkbox border size='small' class='item-float' :label="5" key='5'>星期五</el-checkbox>
                        <el-checkbox border size='small' class='item-float' :label="6" key='6'>星期六</el-checkbox>
                        <el-checkbox border size='small' class='item-float' :label="7" key='7'>星期日</el-checkbox> 
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="识别方式">
                    <el-select v-model='openTimeDialog.form.opMode' style='width:100%'>
                        <el-option v-for='item in openTimeDialog.form.options' :key='item.value'
                        :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="openTimeDialog.dialog = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitOpenTime" :disabled='openTimeDialog.form.submitDisabled'>确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import Http from "@/components/utils/httpUtil";
export default {
  data(){
      return {
        form:{
            isShow:false,
            isCreate: true,
            deptId: '',
            formTitle: '',
            doorId: '',
            name: '',
            devId: '',
            lng: '',
            lat: '',
            doorAccessId: '',
            accessOrderNum: '',
            doorAccesses: [],
            rules:{
                name: [
                    {
                        required: true, 
                        message: '请输入设备名称',
                        trigger: 'blur'
                    },
                ],
                doorAccessId: [
                    {
                        required: true, 
                        message: '请选择所属中继',
                        trigger: 'blur,change',
                        type: "number"
                    }
                ],
                accessOrderNum: [
                    {
                        required: true, 
                        message: '请输入门禁内序号',
                    },
                    {
                        type: 'number', 
                        message: '门禁内序号必须为数字',
                    }
                ],
                devId: [
                    {
                        required: true, 
                        message: '请输入设备号',
                        trigger: 'blur'
                    }
                ]
            },
            submitDisabled: false
        },
        table:{
            depts:[],
            deptId: '',
            queryKey: '',
            tableData: [],
            currentPage: 1,
            pageSize:10,
            rowCount: 0
        },
        cardDialog: {
            dialog: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            rowCount: 0,
            doorId: ''
        },
        eventDialog: {
            dialog: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            rowCount: 0,
            doorId: ''
        },
        openTimeDialog: {
            dialog: false,
            form: {
              endDate: '2020-01-01',
              timePicker:['00:00:00','23:59:59'],
              weekday:[1,2,3,4,5,6,7],
              submitDisabled: false,
              doorId: '',
              accessId: '',
              doorOrderNum: '',
              deptId: '',
              name: '',
              opMode: "1",
              options: [
                  {'value':'1','label': '单卡识别'},
                  {'value':'2','label': '卡加密码'},
                  {'value':'3','label': '定时开关门'},
                  {'value':'4','label': '双卡识别'},
                  {'value':'5','label': '定时报警'},
                  {'value':'6','label': '密码'},
                  {'value':'7','label': '首卡开门'},
              ],
              rules: {
                  'name': [{
                        required: true, 
                        message: '请输入名称',
                        trigger: 'blur'
                    }]
              }
            }
        },        
      }
  },
  methods:{
        init(){
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.form.deptId = userInfo.deptId
        },

        getDoorAccess(){
            let p = {}
            p.deptId = this.form.deptId
            let url = '/doorAccess/listByDept'
            Http.fetch(url,p)
            .then(res=>{
                this.form.doorAccesses = res.data
            })
        },

        //table翻页
        handleCurrentChange(val) {
            this.table.currentPage = val;
            this.getTableData();
        },
        
        deptChange(){
            this.getTableData();
        },
        toAdd(){
            this.form.isShow = true
            this.form.formTitle = '新增门'
            this.form.name = ''
            this.form.devId = ''
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.form.lng = userInfo.lng
            this.form.lat = userInfo.lat
            this.form.doorAccessId = ''
            this.form.isCreate = true
            this.form.accessOrderNum = ''
            this.$refs.form.clearValidate()
        },
        modify(row){
            this.form.isShow = true
            this.form.formTitle = '修改门'
            this.form.doorId = row.doorId
            this.form.name = row.name
            this.form.devId = row.devId
            this.form.lng = row.lng
            this.form.lat = row.lat
            this.form.doorAccessId = row.doorAccessId
            this.form.isCreate = false
            this.form.accessOrderNum = row.accessOrderNum
            this.$refs.form.clearValidate()
        },

        toDel(doorId){
            
            this.$confirm('确定删除该门吗?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let p = {}
                let url = '/door/toDel'
                p.doorId = doorId
                return Http.fetch(url,p)
            })
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTableData()
            })
            .catch(err=>{
                if(err!='cancel'){
                    this.$message({
                        showClose: true,
                        message: err.errMsg,
                        type: "error"
                    });
                }
            })
        },

        getTableData(){
            let p = {};
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            p.key = this.table.queryKey;
            p.deptId = this.table.deptId
            Http.fetch('/door/listQuery', p)
            .then(res => {
                this.table.tableData = res.data.rows;
                this.table.rowCount = res.data.total;
            })
        },
        //获取部门下拉列表
        getDeptData(){
            let p = {};
            Http.fetch('/dept/listTree',p)
            .then(res=>{
                this.table.depts = res.data;
            })
        },
        submitForm(formName){
            this.$refs[formName].validate(valid=>{
                if(valid){
                    this.form.submitDisabled = true
                    let p = {}
                    let url = '/door/add'
                    p.deptId = this.form.deptId
                    p.doorAccessId = this.form.doorAccessId
                    p.name = this.form.name
                    p.devId = this.form.devId
                    p.lng = this.form.lng
                    p.lat = this.form.lat
                    p.accessOrderNum = this.form.accessOrderNum

                    if(!this.form.isCreate){
                        url = '/door/modify'
                        p.doorId = this.form.doorId
                    }

                    Http.fetch(url,p)
                    .then(res=>{
                        this.getTableData()
                        this.form.isShow = false
                        this.form.submitDisabled = false
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: "success"
                        });
                    })
                    .catch(err=>{
                        this.$message({
                            showClose: true,
                            message: err.errMsg,
                            type: "error"
                        });
                        this.form.submitDisabled = false
                    })
                }
            })
        },
        //点击查看门卡
        lookCard(doorId){
            this.cardDialog.doorId = doorId
            this.cardDialog.tableData = []
            this.cardDialog.dialog = true
            this.getCardTableData()
        },
        getCardTableData(){
            let p = {}
            let url = '/doorCard/listByDoorId'
            p.start = (this.cardDialog.currentPage - 1) * this.cardDialog.pageSize;
            p.num = this.cardDialog.pageSize;
            p.doorId = this.cardDialog.doorId
            Http.fetch(url,p)
            .then(res=>{
                this.cardDialog.tableData = res.data.rows;
                this.cardDialog.rowCount = res.data.total;
            })
        },
        handleCardDialogChange(val){
            this.cardDialog.currentPage = val;
            this.getCardTableData();
        },

        //点击查看事件
        lookEvent(doorId){
            this.eventDialog.doorId = doorId
            this.getEventTableData()
            this.eventDialog.dialog = true
        },
        //事件弹窗获取表格数据
        getEventTableData(){
            let p = {}
            let url = '/doorEvent/listQuery'
            p.start = (this.eventDialog.currentPage - 1) * this.eventDialog.pageSize;
            p.num = this.eventDialog.pageSize;
            p.doorId = this.eventDialog.doorId
            Http.fetch(url,p)
            .then(res=>{
                this.eventDialog.tableData = res.data.rows;
                this.eventDialog.rowCount = res.data.total;
            })
        },

        //事件弹窗表格翻页
        handleEventDialogChange(val){
            this.eventDialog.currentPage = val
            this.getEventTableData()
        },
        //开门
        toOpen(doorId){
            let p = {}
            let url = '/door/toOpen'
            p.doorId = doorId
            Http.fetch(url,p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
            })
            .catch(err=>{
                this.$message({
                    showClose: true,
                    message: err.errMsg,
                    type: "error"
                });
            })
        },
        //关门
        toClose(doorId){
            let p = {}
            let url = '/door/toClose'
            p.doorId = doorId
            Http.fetch(url,p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
            })
            .catch(err=>{
                this.$message({
                    showClose: true,
                    message: err.errMsg,
                    type: "error"
                });
            })
        },
        //添加开放时间 - 界面
        addOpenTime(row){
            this.openTimeDialog.dialog = true
            this.openTimeDialog.form.endDate = '2020-01-01'
            this.openTimeDialog.form.timePicker = ['00:00:00','23:59:59']
            this.openTimeDialog.form.weekday = [1,2,3,4,5,6,7]
            this.openTimeDialog.form.opMode = '1'
            this.openTimeDialog.form.submitDisabled = false
            this.openTimeDialog.form.doorId = row.doorId
            this.openTimeDialog.form.accessId = row.doorAccessId
            this.openTimeDialog.form.doorOrderNum = row.accessOrderNum
            this.openTimeDialog.form.deptId = row.deptId
            this.openTimeDialog.form.name = ''
        },
        //添加开放时间 - 功能
        submitOpenTime(){
            this.$refs.openTimeForm.validate(valid=>{
                this.openTimeDialog.form.submitDisabled = true
                let p = {}
                p.name = this.openTimeDialog.form.name
                p.endDate = this.openTimeDialog.form.endDate
                p.startTime = this.openTimeDialog.form.timePicker[0]
                p.endTime = this.openTimeDialog.form.timePicker[1]
                p.weekday = this.openTimeDialog.form.weekday
                p.opMode = this.openTimeDialog.form.opMode
                p.doorId = this.openTimeDialog.form.doorId
                p.accessId = this.openTimeDialog.form.accessId
                p.doorOrderNum = this.openTimeDialog.form.doorOrderNum
                p.deptId = this.openTimeDialog.form.deptId
                let url = '/doorOpenTime/add'
                Http.fetch(url,p)
                .then(res=>{
                    this.$message({
                        showClose: true,
                        message: res.sucMsg,
                        type: "success"
                    });
                    this.openTimeDialog.form.submitDisabled = false
                    this.openTimeDialog.dialog = false
                })
                .catch(err=>{
                    this.$message({
                        showClose: true,
                        message: err.errMsg,
                        type: "error"
                    });
                    this.openTimeDialog.form.submitDisabled = false
                })
            });
            
        },
  },
  mounted(){
      this.init()
      this.getTableData()
      this.getDeptData()
      //获取本部门的门禁列表
      this.getDoorAccess()
  }
}
</script>
<style scoped>

</style>

<style>
.expireTime .el-input__inner{
    text-align: center !important;
}
.item-float{
    margin-right: 10px;
    margin-bottom: 10px;
}
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 0px;
}
</style>
